<template>
    <view>
        <cu-custom bgColor="bg-white" :isBack="true">
            <block slot="content">我的关注</block>
        </cu-custom>
        <view class="list padding" v-if="list.length > 0">
            <view class="item bg-white radius-lg padding-sm margin-bottom-sm crow" v-for="(item, index) in list"
                :key="index">
                <view class="left avatar margin-left-sm">
                    <image :src="item.headimg" lazy-load mode="" class="img"></image>
                    <image src="@/static/image/parter/title/title-1.gif" v-if="item.headimg_decoration === 1" mode=""
                        class="title-img"></image>
                    <image src="@/static/image/parter/title/title-2.gif" v-else-if="item.headimg_decoration === 2" mode=""
                        class="title-img"></image>
                    <image src="@/static/image/parter/title/title-3.gif" v-else-if="item.headimg_decoration === 3" mode=""
                        class="title-img"></image>
                    <image src="@/static/image/parter/title/title-4.gif" v-else-if="item.headimg_decoration === 4" mode=""
                        class="title-img"></image>
                </view>
                <view class="right">
                    <view class="top crow space-between">
                        <view class="left-box">
                            <text class="padding-right-mn text-black text-bold">{{ item.nickname }}</text>
                            <text :class="item.is_collect ? 'text-red cuIcon-likefill' : 'cuIcon-like'"
                                @tap="collect(item, index)"></text>
                        </view>
                    </view>
                    <view class="center text-sm text-gray crow space-between">
                        <view class="left-box">
                            <text class="cuIcon-shop" v-if="item.shop_id"></text>
                            <text class="padding-left-mn">{{ item.shop_title }}</text>
                        </view>
                    </view>
                    <view class="bottom text-gray text-sm crow space-between">
                        <view class="crow">
                            <view class="solid-right padding-right">
                                <text class="cuIcon-form themeColor"></text>{{ item.order_num }}
                            </view>
                            <view class="solid-right padding-lr">
                                <text class="cuIcon-friend themeColor"></text>{{ item.people_num }}
                            </view>
                            <view class="padding-left">
                                <text class="cuIcon-message themeColor"></text>{{ item.comment_num }}
                            </view>
                        </view>
                        <view class="right-box">
                            <view class="liji"
                                @click="$utils.$page.open('/pages/technician/details?id=' + item.technician_id)">
                                <button class="cu-btn round sm">立即预约</button>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <emptyData v-else type="notLog" top="10" text="暂无关注"></emptyData>

        <loading v-if="pageLoading" />
    </view>
</template>

<script>
let debounceGetList;
export default {
    data() {
        return {
            pageLoading: false,
            search: {
                page: 1,
                keywords: '',
            },
            list: []
        };
    },
    onLoad() {
        this.getList();
    },
    onReachBottom() {
        this.search.page++;
        this.getList();
    },
    methods: {
        getList() {
            if (this.pageLoading) return;
            this.pageLoading = true;
            this.$utils.$api.Collect.technicianList(this.search).then(data => {
                this.list = [...this.list, ...data.data];
            }).finally(() => {
                this.pageLoading = false;
            });
        },
        collect(item, index) {
            this.$utils.$api.Collect.technician(item.technician_id).then((data) => {
                this.list.splice(index, 1);
            }).catch(err => {
                this.$utils.$message.error(err.msg);
            })
        }
    },
}
</script>
<style lang="less" scoped>
.list {
    .item {
        height: 200upx;

        .avatar {
            position: relative;
            width: 170upx;
            height: 170upx;
            display: flex;
            align-items: center;

            .img {
                width: 130upx;
                height: 130upx;
                border-radius: 50%;
            }

            .title-img {
                width: 210upx;
                height: 175upx;
                position: absolute;
                left: -20rpx;
            }
        }

        .right {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 150upx;

            .top {
                .status {
                    border: 2rpx solid var(--theme-color);
                    font-size: 20rpx;

                    .zuizao {
                        background-color: var(--theme-color);
                        padding: 5rpx;
                        border-top-right-radius: 10rpx;
                        border-bottom-right-radius: 10rpx;
                        color: white;
                    }

                    .time {
                        padding: 5rpx;
                    }
                }
            }
        }
    }
}

.liji {
    button {
        background: var(--theme-bg-color);
        color: white;
    }
}</style>
